<template>
  <!-- 我的页面 -->
  <div class="mineBox" style="padding-bottom:50px;">
    <!-- 标题 -->
    <x-header :left-options="{showBack: false,backText:''}" class="headerBox">我的
      <router-link :to="{ name: 'userInfo', params: { id: user.id }}" slot="right" class="seeInfo">查看信息</router-link>
    </x-header>
    <router-link
      :to="{ name: 'myInformation', params: { id: user.id }}"
      v-if="user!==''"
      class="userBox flex">
      <img :src="user.img" alt class="userImg" />
      <div class="userContent">
        <div class="title flex">
          <div class="name">{{user.userName}}</div>
          <img v-if="user.sex=='女'" src="../assets/img/icon_gril.png" alt />
          <img v-else src="../assets/img/icon_boy.png" alt />
        </div>
        <div class="honor flex">
          <div class="grade honorItem">{{user.grade}}</div>
          <div class="certify honorItem">证书：{{user.certificate}}个</div>
        </div>
      </div>
      <div class="rightStatus flex">
        <div class="status">{{user.status}}</div>
        <x-icon type="ios-arrow-right" size="26" class="rightIcon"></x-icon>
      </div>
    </router-link>
    <div v-if="user==''" class="userBox flex">
      <img src="../assets/img/img_mrtx.png" alt class="userImg" />
      <div class="userContent">
        <router-link to="/login" class="goinBtn">点击登录</router-link>
        <div class="hint">登录后可查看你的个人资料</div>
      </div>
      <div class="rightStatus flex">
        <x-icon type="ios-arrow-right" size="30" class="rightIcon"></x-icon>
      </div>
    </div>
    <group>
      <div>
        <cell
          v-for="(item,index) in powerList"
          :title="item.title"
          :value="item.value"
          :link="item.title=='私教简介'?{ name: 'coachIntro', params: { id: user.id }}:item.title=='专业证书'?{ name: 'certificate', params: { id: user.id }}:
          item.title=='赛事成绩'?{ name: 'competieResults', params: { id: user.id  }}:{ name: 'rests', params: { id: user.id  }}"
          :key="index"
        ></cell>
      </div>
    </group>
    <div class="goOut" @click="showConfirm=true">退出登录</div>
    <confirm v-model="showConfirm" title="确定要退出吗" @on-confirm="onConfirm"></confirm>

    <TabBar></TabBar>
  </div>
</template>

<script>
import { XHeader, Cell, Group, Confirm } from 'vux'
import TabBar from "../components/tabBar";
export default {
  components: {
    XHeader,
    Cell,
    Group,
    TabBar,
    Confirm
  },
  data() {
    return {
      showConfirm: false,
      user: {
        id: '1',
        userName: '罗小飞',
        sex: '女',
        grade: '二级教练',
        certificate: '3',
        status: '审批中',
        img: require('../assets/img/img_tx_1.png')
      },
      powerList: [
        {
          title: '私教简介',
          value: ''
        },
        {
          title: '专业证书',
          value: '3'
        },
        {
          title: '赛事成绩',
          value: '3'
        },
        {
          title: '其他',
          value: ''
        },
      ]
    }
  },
  methods: {
    onConfirm() {
      this.user = ''
    }
  }

}
</script>

<style lang="less" scoped>
.mineBox {
  // 头部导航
  /deep/.headerBox {
    background-color: #fff;
    border-bottom: 1px solid #eee;
    .vux-header-left {
      left: 24px;
      .vux-header-back {
        color: #000;
      }
      .left-arrow:before {
        border-color: #000;
      }
    }
    .vux-header-title {
      color: #000;
    }
    .vux-header-right {
      color: #000;
      .seeInfo {
        color: currentColor;
      }
    }
  }
  .userBox {
    padding: 20px;
    color: currentColor;
    .userImg {
      width: 140px;
      height: 140px;
      margin-right: 20px;
    }
    .userContent {
      .title {
        margin-bottom: 20px;
        .name {
          font-size: 36px;
          font-weight: bold;
          margin-right: 20px;
        }
        img {
          width: 30px;
          height: 30px;
        }
      }
      .honor {
        .honorItem {
          padding: 2px 8px;
          font-size: 24px;
          margin-right: 10px;
          border-radius: 10px;
          text-align: center;

        }
        .grade {
          background-color: #fae2ce;
          color: #f79146;
        }
        .certify {
          background-color: #cfe7fd;
          color: #53a7f5;
        }
      }
      .goinBtn {
        background-color: #338afb;
        color: #fff;
        border-radius: 40px;
        width: 200px;
        font-size: 34px;
        text-align: center;
        height: 60px;
        line-height: 60px;
        margin-bottom: 20px;
        display: block;
      }
      .hint {
        color: #e0e0e0;
      }
    }
    .rightStatus {
      margin-left: auto;
      .status {
        font-size: 34px;
        color: #f79146;
      }
      .rightIcon {
        fill: #818181;
      }
    }
  }
  /deep/.weui-cells {
    margin-top: 0;
  }
  .goOut {
    height: 100px;
    line-height: 100px;
    text-align: center;
    font-weight: bold;
    font-size: 30px;
    position: absolute;
    bottom: 100px;
    left: 0;
    right: 0;
    border-top: 1px solid #eee;
  }
  /deep/.weui-dialog__bd {
    min-height: 0;
  }
}
</style>